<template>
  <div>
      <basic-dialog :visible="show"
                    minWidth="1000px"
                    :title="!isEdit ? '新增保养项目' : '编辑保养项目'"
                    :isShowInnerLoading="isShowInnerLoading">
            <q-form greedy
                    ref="myForm"
                    @submit="submit"
                    class="dialog-content form-inline block q-mt-md">
                <div class="flex justify-between">
                    <yz-input
                          v-model.trim="queryParams.name"
                          class="q-mr-md"
                          :isDisable="isEdit"
                          :maxlength="20"
                          :rules="[0]"
                          title="项目名称"
                    ></yz-input>
                    <yz-input v-model="queryParams.deviceType"
                              inputType="select"
                              :rules="[0]"
                              :options="deviceTypesList"
                              title="设备类型"
                              ></yz-input>
                    <yz-input v-model="queryParams.maintenanceType"
                              inputType="select"
                              :rules="[0]"
                              :options="maintenanceTypeOptions"
                              title="保养类型"
                              ></yz-input>
                </div>
            <q-separator class="qa-line"/>
            <div class="flex justify-between q-mb-sm q-mt-sm">
              <div class="plan-title">保养项目</div>
              <table-btn btn-type="other" tooltip="添加" icon="icontubiao-39" @click="onAddItem"/>
            </div>
            <div class="page-content margin-b-10">
              <q-table
                  :data="tableData"
                  :columns="columns"
                  style="max-height:330px; margin: 0px"
                  class="scroll myTable stick-last-col inherit"
                  :pagination.sync="pagination"
                  color="primary"
                  :hide-bottom="tableData.length > 0"
                  row-key="id"
                >
              <template v-slot:body-cell-index="props">
                  <q-td>
                    <span :id="`scrollFlag_${props.row.__index}`">{{props.row.__index + 1}}</span>
                  </q-td>
              </template>
              <template v-slot:body-cell-contentValue="props">
                  <q-td class="" style="padding: 14px 5px 0 0">
                  <yz-input  v-model="props.row.contentValue"
                              style="width: 226px"
                              :rules="[0]"
                              :hintRule="onSelectContent(props.row.contentValue)"
                              inputType="filterSelect"
                              :options="maintainItemContentClone"
                              :isRule="false"
                              ></yz-input>
                  </q-td>
              </template>
              <template v-slot:body-cell-criteria="props">
                  <q-td class="" style="padding: 14px 5px 0 0">
                  <yz-input  v-model="props.row.criteria"
                              style="width: 226px"
                              :maxlength="50"
                              :isRule="false"
                              ></yz-input>
                  </q-td>
              </template>
              <template v-slot:body-cell-operations="props">
                <q-td  style="width:100px">
                  <div class="text-center btn-group">
                    <table-btn btnType="delete" @click="onDeleteRow(props.row, props.row.__index)"/>
                  </div>
                </q-td>
              </template>
            </q-table>
            </div>
          <q-separator style="margin-left: -20px;margin-right: -20px;width: calc(100% + 40px)"/>
          <div class="dialog-footer text-center margin-t-15">
                  <q-btn outline
                        label="取消"
                        color="primary"
                        @click="reset"
                        class="q-mr-md"
                        type="reset" />
                  <q-btn unelevated
                        label="确认"
                        :loading="isSumbitLoading"
                        v-throttle
                        :disable="!tableData.length"
                        color="primary"
                        type="submit" />
                </div>
            </q-form>
      </basic-dialog>
  </div>
</template>
<script>
import { getMaintenaceProgramsById, editMaintenacePrograms, addMaintenacePrograms } from 'src/boot/maintenance/maintenance-item'
import { mapGetters, mapActions } from 'vuex'
import _ from 'lodash'
export default {
  name: 'add-edit-stockin-dialog',
  props: {
    show: Boolean,
    maintenanceItemData: Object
  },
  data () {
    return {
      tableData: [],
      queryParams: {
        name: '',
        maintenanceType: '',
        deviceType: ''
      },
      pagination: {
        rowsPerPage: 0
      },
      imgList: [],
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'contentValue', label: '项目内容', align: 'left', field: 'contentValue' },
        { name: 'criteria', label: '判断基准', align: 'left', field: 'criteria' },
        { name: 'operations', label: '操作', align: 'left', field: 'operations' }
      ],
      isSumbitLoading: false,
      isShowInnerLoading: false
    }
  },
  computed: {
    isEdit () {
      return !_.isEmpty(this.maintenanceItemData)
    },
    //  保养类型枚举
    maintenanceTypeOptions () {
      return this.$getEnum(this.Enums.MAINTENANCE_TYPE)
    },
    ...mapGetters({
      'deviceTypesList': 'maintenance/deviceTypesList',
      'maintainItemContent': 'maintenance/maintainItemContent'
    }),
    maintainItemContentClone () {
      return this.maintainItemContent.map(v => {
        return {
          ...v,
          label: `${v.label}(${v.value})`
        }
      })
    }
  },
  watch: {
    show (newPro) {
      newPro && this.initData()
    }
  },
  mounted () {
  },
  methods: {
    initData () {
      this.getDeviceTypesList(!this.isEdit)
      this.getMaintainItemContent(!this.isEdit)
      this.isEdit && this.getList()
    },
    submit () {
      const params = {
        ...this.queryParams
      }
      params.items = this.tableData
      this.isEdit ? this.editById(params) : this.addItems(params)
    },
    onDeleteRow (row, index) {
      this.tableData.splice(index, 1)
    },
    // 添加单个保养项目
    onAddItem () {
      this.tableData.push({
        index: '',
        contentValue: '',
        criteria: ''
      })
      this.$nextTick(() => {
        document.getElementById(`scrollFlag_${this.tableData.length - 1}`).scrollIntoView()
      })
    },
    editById (params) {
      this.isShowInnerLoading = true
      editMaintenacePrograms(params).then(res => {
        this.$message.success('修改成功')
        this.reset()
        this.isShowInnerLoading = false
      }).catch((err) => {
        this.isShowInnerLoading = false
        console.log(err)
      })
    },
    addItems (params) {
      this.isShowInnerLoading = true
      addMaintenacePrograms(params).then(res => {
        this.$message.success('添加成功')
        this.reset()
        this.isShowInnerLoading = false
      }).catch((err) => {
        this.isShowInnerLoading = false
        console.log(err)
      })
    },
    // 校验项目内容不能重复
    onSelectContent () {
      const member = (item) => { return this.tableData.filter(v => v.contentValue === item).length }
      return [ val => member(val) < 2 || `项目内容不能重复` ]
    },
    // edit get list
    getList () {
      this.isShowInnerLoading = true
      getMaintenaceProgramsById(this.maintenanceItemData.id).then((result) => {
        const ret = result.data
        this.queryParams = Object.assign(this.queryParams, ret)
        this.tableData = ret.items
        this.isShowInnerLoading = false
      }).catch((err) => {
        this.isShowInnerLoading = false
        console.log(err)
      })
    },
    reset () {
      Object.assign(this.queryParams, this.$options.data().queryParams)
      this.tableData = []
      this.$emit('close')
    },
    ...mapActions({
      'getDeviceTypesList': 'maintenance/getDeviceTypesList',
      'getMaintainItemContent': 'maintenance/getMaintainItemContent'
    })
  }
}
</script>
